<template>
	<div class="div-user-sum">
		<div class="div-top">
			<span>教材管理</span>
		</div>
		<span class="search_label">教材名称:</span>
		<el-input placeholder="请输入教材名称" v-model="textbookName" style="width:200px;margin-left: 10px" clearable />
		<span class="search_label">专业:</span>
		<el-select v-model="majorId" placeholder="请选择专业" style="width:200px" clearable>
			<el-option v-for="item in majors" :key="item.id" :label="item.name" :value="item.id">
			</el-option>
		</el-select>
		<span class="search_label">状态:</span>
		<el-select v-model="state" placeholder="请选择状态" style="width:200px" clearable>
			<el-option v-for="item in states" :key="item.value" :label="item.label" :value="item.value">
			</el-option>
		</el-select>
		<!--<span class="topic-courselabel">创建时间：</span>
		<el-date-picker v-model="startEnd" @change='currentChange(1)' value-format='yyyy-MM-dd HH:mm:ss' style="width: 380px;" type="datetimerange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>-->
		<el-button type="primary" style="margin:0 0 10px 10px" @click="currentChange(1)">搜索</el-button>
		<el-button type="primary" style="margin:0 0 10px 10px" @click="openAdd"
			v-permission="['textbook:allocation']">添加教材</el-button>
		<div style="margin: 10px;">
			<el-table :data="tableDate" border row-key='textbookId'>
				<el-table-column prop="imageUrl" label="封面" align="center" show-overflow-tooltip>
					<template slot-scope="scope">
						<el-tooltip class="item" effect="dark" content="点击图片预览" placement="top">
							<el-image style="width: 100px; height: 100px" :src="baseurl + scope.row.textbookCover"
								:preview-src-list="[baseurl + scope.row.textbookCover]"></el-image>
						</el-tooltip>
					</template>
				</el-table-column>
				<el-table-column prop="textbookName" label="教材名称" align="center">
				</el-table-column>
				<el-table-column prop="majorName" label="专业" align="center">
				</el-table-column>
				<el-table-column prop="version" label="版本" align="center">
				</el-table-column>
				<el-table-column prop="state" label="状态" align="center">
					<template slot-scope="scope">
						<el-tag type='success' v-if="scope.row.state == '1'">已启用</el-tag>
						<el-tag type='danger' v-if="scope.row.state == '2'">已禁用</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center" width='320'>
					<template slot-scope="scope">
						<div v-permission="['textbook:allocation']">
							<el-button type="success" @click="openEditTeacher(scope.row)" size="small"
								v-if="scope.row.state == '2'">分配章节</el-button>
							<el-button type="primary" @click="openInfo(scope.row)" size="small"
								v-if="scope.row.state == '2'">编辑章节</el-button>
							<br v-if="scope.row.state == '2'" />
							<br v-if="scope.row.state == '2'" />
							<el-button type="info" @click="openState(scope.row)" size="small"
								v-if="scope.row.state == '1'">禁用</el-button>
							<el-button type="success" @click="openState(scope.row)" size="small"
								v-if="scope.row.state == '2'">启用</el-button>
							<el-button type="primary" @click="openView(scope.row)" size="small"
								v-if="scope.row.state == '1'">预览</el-button>
							<el-button type="primary" @click="openEdit(scope.row)" size="small"
								v-if="scope.row.state == '2'">编辑</el-button>
							<el-button type="danger" @click="openDelete(scope.row)" size="small"
								v-if="scope.row.state == '2'">删除</el-button>
						</div>
						<div v-permission="['textbook:enter']">
							<el-button type="primary" @click="openView(scope.row)" size="small"
								v-if="scope.row.state == '1'">预览</el-button>
							<el-button type="primary" @click="openInfoSection(scope.row)" size="small"
								v-if="scope.row.state == '2'">编辑章节</el-button>
						</div>
					</template>
				</el-table-column>
			</el-table>
			<div style="margin: 10px; text-align: center;">
				<el-pagination background @current-change="currentChange" :current-page="pageNum" :page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper" :total="total">
				</el-pagination>
			</div>
		</div>
		<el-dialog title="添加教材" :close-on-press-escape='false' :close-on-click-modal='false' :append-to-body='true'
			:visible.sync="addDialog" width="800px">
			<el-form :model="addForm" :rules="rules" ref="addForm" label-width="110px"
				style='width: calc(100% - 40px);'>
				<el-form-item label="教材名称" prop="textbookName">
					<el-input placeholder="请输入教材名称" v-model="addForm.textbookName" maxlength="255" clearable></el-input>
				</el-form-item>
				<el-form-item label="专业" prop="majorId">
					<el-select v-model="addForm.majorId" placeholder="请选择专业" style="width:100%">
						<el-option v-for="item in majors" :key="item.id" :label="item.name" :value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="版本号" prop="version">
					<el-input placeholder="请输入版本号" v-model="addForm.version" maxlength="255" clearable></el-input>
				</el-form-item>
				<el-form-item label="状态" prop="state">
					<el-select v-model="addForm.state" placeholder="请选择状态" style="width:100%">
						<el-option v-for="item in states" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="前言" prop="prefaceHtml" v-if="false">
					<editor-more :content='addForm.prefaceHtml' @change="((data) => { addChange(data) })"></editor-more>
				</el-form-item>
				<el-form-item label="封面" prop="textbookCover">
					<div class="avataruploads">
						<div class="avatarupcover avatarupcover-add" @click="$refs.icon_add.click()">
							<i class="el-icon-plus"></i>
						</div>
						<img :src="baseurl + addForm.textbookCover" v-if="addForm.textbookCover" />
						<input ref="icon_add" type="file" accept=".jpg, .png, .JPG, .PNG" style="display: none"
							@change="iconAdd($event)" />
					</div>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="resetAdd">取 消</el-button>
				<el-button type="primary" @click="addData" :disabled='dataloading'>确 定</el-button>
			</div>
		</el-dialog>
		<el-dialog title="修改教材" :close-on-press-escape='false' :close-on-click-modal='false' :append-to-body='true'
			:visible.sync="editDialog" width="800px">
			<el-form :model="editForm" :rules="rules" ref="editForm" label-width="110px"
				style='width: calc(100% - 40px);'>
				<el-form-item label="教材名称" prop="textbookName">
					<el-input placeholder="请输入教材名称" v-model="editForm.textbookName" maxlength="255"
						clearable></el-input>
				</el-form-item>
				<el-form-item label="专业" prop="majorId">
					<el-select v-model="editForm.majorId" placeholder="请选择专业" style="width:100%">
						<el-option v-for="item in majors" :key="item.id" :label="item.name" :value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="版本号" prop="version">
					<el-input placeholder="请输入版本号" v-model="editForm.version" maxlength="255" clearable></el-input>
				</el-form-item>
				<el-form-item label="状态" prop="state">
					<el-select v-model="editForm.state" placeholder="请选择状态" style="width:100%">
						<el-option v-for="item in states" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="前言" prop="prefaceHtml" v-if="false">
					<editor-more :content='editForm.prefaceHtml'
						@change="((data) => { addChange(data) })"></editor-more>
				</el-form-item>
				<el-form-item label="封面" prop="textbookCover">
					<div class="avataruploads">
						<div class="avatarupcover avatarupcover-add" @click="$refs.icon_edit.click()">
							<i class="el-icon-plus"></i>
						</div>
						<img :src="baseurl + editForm.textbookCover" v-if="editForm.textbookCover" />
						<input ref="icon_edit" type="file" accept=".jpg, .png, .JPG, .PNG" style="display: none"
							@change="iconEdit($event)" />
					</div>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="resetEdit">取 消</el-button>
				<el-button type="primary" @click="editData" :disabled='dataloading'>确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
import EditorMore from "@/components/Editor/index.vue";
import { putProgress } from "@/utils/oss.js";
import { majorList } from '@/api/major.js'
import { textbookList, textbookListByUserId, saveTextbook, updateTextbook, removeTextbook, updateState } from "@/api/textbook.js"
export default {
	components: {
		EditorMore
	},
	data() {
		return {
			tableDate: [],
			startEnd: [],
			textbookName: "",
			majorId: "",
			state: "",
			pageNum: 1,
			pageSize: 10,
			total: 0,
			majors: [],
			states: [{
				value: 1,
				label: "启用"
			}, {
				value: 2,
				label: "禁用"
			}],
			dataloading: false,
			addDialog: false,
			editDialog: false,
			addForm: {
				majorId: '',
				textbookName: '',
				textbookCover: '',
				version: '',
				state: '',
				prefaceHtml: '',
			},
			editForm: {
				textbookId: '',
				textbookName: '',
				majorId: '',
				version: '',
				state: '',
				prefaceHtml: '',
				textbookCover: '',
			},
			rules: {
				textbookName: [{
					required: true,
					message: '请输入教材名称',
					trigger: 'blur'
				}],
				textbookCover: [{
					required: true,
					message: '请上传封面',
					trigger: 'blur'
				}],
				version: [{
					required: true,
					message: '请上输入版本号',
					trigger: 'blur'
				}],
				state: [{
					required: true,
					message: '请选择状态',
					trigger: 'blur'
				}],
				majorId: [{
					required: true,
					message: '请选择专业',
					trigger: 'blur'
				}],
				prefaceHtml: [{
					required: true,
					message: '请输入前言',
					trigger: 'blur'
				}],
			},

		}
	},
	created() {
		this.getMajorList()
		this.getDateList()
	},
	methods: {
		openAdd() {
			this.addDialog = true;
		},
		iconAdd(event) {
			const files = event.target.files;
			if (!files || files.length <= 0) {
				return;
			}
			const file = files[0];
			const key = `szhjxpt/textbookCover/${file.name}`;
			putProgress(key, file).then(res => {
				this.addForm.textbookCover = key;
				this.$refs.icon_add.value = '';
			});
		},
		addChange(data) {
			this.addForm.prefaceHtml = data.html;
		},
		addData() {
			this.dataloading = true;
			setTimeout(_ => {
				this.dataloading = false;
			}, 1000)
			this.$refs.addForm.validate((valid) => {
				if (valid) {
					var data = Object.assign({}, this.addForm);
					saveTextbook(data).then(async res => {
						if (res.code == '200') {
							this.$message({
								message: '添加成功',
								type: 'success'
							});
							this.getDateList();
							this.resetAdd();
						} else {
							this.$message({
								message: res.message,
								type: 'error'
							});
						}
					});
				}
			})
		},
		resetAdd() {
			this.addDialog = false;
			this.$refs.addForm.resetFields();
			this.$refs.addForm.clearValidate();
		},
		openEdit(item) {
			this.editDialog = true;
			this.editForm = Object.assign({}, item);
		},
		iconEdit(event) {
			const files = event.target.files;
			if (!files || files.length <= 0) {
				return;
			}
			const file = files[0];
			const key = `szhjxpt/textbookCover/${file.name}`;
			putProgress(key, file).then(res => {
				this.editForm = Object.assign({}, this.editForm, {
					textbookCover: key
				});
				this.$refs.icon_edit.value = '';
			});
		},
		editChange(data) {
			this.editForm.prefaceHtml = data.html;
		},
		editData() {
			this.$refs.editForm.validate((valid) => {
				if (valid) {
					var data = Object.assign({}, this.editForm);
					updateTextbook(data).then(async res => {
						if (res.code == '200') {
							this.$message({
								message: '编辑成功',
								type: 'success'
							})
							this.getDateList();
							this.resetEdit();
						} else {
							this.$message({
								message: res.message,
								type: 'error'
							})
						}
					})
				}
			})
		},
		resetEdit() {
			this.editDialog = false;
			this.$refs.editForm.resetFields();
			this.$refs.editForm.clearValidate()
		},
		openInfo(item) {
			this.$router.push({
				name: 'textbookDetails',
				query: {
					textbookId: item.textbookId,
					from: "admin"
				}
			})
		},
		openInfoSection(item) {
			this.$router.push({
				name: 'textbookDetails',
				query: {
					textbookId: item.textbookId,
					from: "teacher"
				}
			})
		},
		openView(item) {
			this.$router.push({
				name: 'textbookInfo',
				query: {
					textbookId: item.textbookId
				}
			})
		},
		openEditTeacher(item) {
			this.$router.push({
				name: 'textbookTeacher',
				query: {
					textbookId: item.textbookId
				}
			})
		},
		openDelete(item) {
			this.$confirm('是否删除该教材?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				removeTextbook({
					textbookId: item.textbookId
				}).then(async res => {
					if (res.code == '200') {
						this.$message({
							message: '删除成功',
							type: 'success'
						})
						this.getDateList();
					} else {
						this.$message({
							message: res.message,
							type: 'error'
						})
					}
				})
			}).catch(() => { });
		},
		openState(item) {
			var message = item.state == '1' ? '是否禁用该教材?' : '是否启用该教材?';
			this.$confirm(message, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				updateState({
					textbookId: item.textbookId,
					state: item.state == '1' ? '2' : '1',
				}).then(async res => {
					if (res.code == '200') {
						this.$message({
							message: res.message,
							type: 'success'
						});
						this.getDateList();
					} else {
						this.$message({
							message: res.message,
							type: 'error'
						});
					}
				})
			}).catch(() => { });
		},
		getMajorList() {
			majorList({}).then(res => {
				this.majors = res.data || []
			})
		},
		currentChange(pageNum) {
			this.pageNum = pageNum;
			this.getDateList()
		},
		getDateList() {
			var data = {
				pageNum: this.pageNum,
				pageSize: this.pageSize,
				textbookName: this.textbookName ? this.textbookName : null,
				majorId: this.majorId ? this.majorId : null,
				state: this.state ? this.state : null,
				startTime: this.startEnd && this.startEnd.length == 2 ? this.startEnd[0] : null,
				endTime: this.startEnd && this.startEnd.length == 2 ? this.startEnd[1] : null,
			}
			textbookListByUserId(data).then(async res => {
				this.tableDate = res.data.list;
				this.total = res.data.total;
			});
		},
	}
}
</script>